$baseFont: 37.5;

@function parseInt($n) {
  @return $n / ($n * 0 + 1); /* 2 */
}

@function rem($px) {
  $list: ();
  @each $item in $px {
    @if $item == 0 or $item == auto {
      $list: append($list, $item);
    } @else {
      $unit: unit($item);
      $val: parseInt($item);

      @if $unit == px {
        $list: append($list, ($val / $baseFont + rem))
      }

      @if $unit == rem {
        $list: append($list, $item);
      }
    }
  }
  @return $list;
}

@import "mixin";

@mixin block-header {
  width: 100%;
  height: rem(49px);
  line-height: rem(49px);
  padding: rem(17px) rem(16px) 0 rem(16px);
  background-color: #fff;
  >h3 {
    border-left: rem(4px) solid #dc3838;
    padding-left: rem(5px);
    line-height: rem(16px);
    font-weight: bold;
    font-size: rem(16px);
  }
}

@mixin view-more {
  font-size: rem(14px);
  color: #999999;
  &:after {
    content: '';
    display: inline-block;
    vertical-align: text-bottom;
    width: rem(8px);
    height: rem(12.5px);
    @include bg-image('../images/arrow-right');
    background-repeat: no-repeat;
  }
}

body {
  padding-bottom: rem(50px);
}

.header {
  width: 100%;
  >.swiper-container {
    >.swiper-wrapper {
      >.swiper-slide {
        >a {
          display: block;
          >img {
            width: 100%;
            vertical-align: middle;
          }
        }
      }
    }
  }
}

.block-cp {
  background-color: #fff;
  >.block-header {
    @include block-header()
  }
  >.block-body {
    padding: 0 rem(16px) rem(16px);
    font-size: 0;
    >.block-item {
      display: inline-block;
      float: left;
      padding: rem(8px) rem(12px) 0;
      width: rem(165px);
      height: rem(95px);
      border-radius: rem(3px);
      box-shadow: 0 0 rem(4px) rgba(0, 0, 0, 0.15);
      font-size: 0;
      >.item-header {
        display: flex;
        >h4 {
          display: inline-block;
          vertical-align: middle;
          flex: 1;
          line-height: rem(31px);
          font-size: rem(16px);
          color: #333;
        }
        >.avatar {
          display: inline-block;
          vertical-align: middle;
          width: rem(31px);
          height: rem(31px);
          border-radius: 50%;
          overflow: hidden;
          >.icon-index-ceping {
            width: 100%;
            height: 100%;
            @include bg-image('../images/icon-index-ceping')
          }
          >.icon-index-pusher {
            width: 100%;
            height: 100%;
            @include bg-image('../images/icon-index-pusher')
          }
        }
      }
      >.item-body {
        padding-top: rem(5px);
        >.desc {
          line-height: rem(21px);
          font-size: rem(13px);
          color: #999;
        }
      }
      &:nth-child(2) {
        float: right;
      }
    }
  }
}

.block-tj {
  margin-bottom: rem(15px);
  >.block-header {
    @include border-bottom-1px(#e5e5e5);
    @include block-header();
    >h3 {
      >.view-more {
        float: right;
        @include view-more()
      }
    }
  }
  >.tj-wrapper {
    >.tj-item {
      display: flex;
      padding: rem(13px) rem(16px);
      width: 100%;
      height: rem(135px);
      background-color: #ffffff;
      @include border-bottom-1px(#e5e5e5);
      font-size: 0;
      >.tj-item-left {
        flex: 0 0 rem(128px);
        width: rem(128px);
        height: rem(109px);
        border-right: rem(1px) solid #e5e5e5;
        >.plat-logo-wrapper {
          position: relative;
          width: 100%;
          height: rem(60px);
          >img {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: rem(105px);
            height: rem(33px);
          }
        }
        >.plat-tag-wrapper {
          width: 100%;
          height: rem(32px);
          text-align: center;
          >.plat-tag {
            display: inline-block;
            padding: rem(4px) rem(8px);
            background-color: #0084ff;
            border-radius: rem(16px);
            >.icon-currency {
              margin-right: rem(5px);
              display: inline-block;
              vertical-align: middle;
              width: rem(16px);
              height: rem(15px);
              @include bg-image('../images/icon-currency')
            }
            >span {
              display: inline-block;
              vertical-align: middle;
              font-size: rem(12px);
              color: #ffffff;
            }
          }
        }
        >.tag-msg {
          >p {
            text-align: center;
            font-size: rem(12px);
            color: #333333;
          }
        }
      }
      >.tj-item-right {
        flex: 1;
        padding-left: rem(20px);
        >.plat-info-header {
          position: relative;
          width: 100%;
          height: rem(45px);
          >.plat-name {
            font-size: rem(17px);
            line-height: rem(22px);
            color: #333333;
          }
          >.plat-plan {
            position: absolute;
            right: 0;
            top: 0;
            width: rem(87px);
            height: rem(22px);
            line-height: rem(22px);
            text-align: center;
            border-radius: rem(22px);
            background-color: #dc3838;
            font-size: rem(12px);
            color: #ffffff;
          }
          >.tag-wrapper {
            padding-top: rem(5px);
            >.tag {
              margin: 0 rem(2px);
              border: rem(1px) solid #dc3838;
              border-radius: rem(2px);
              padding: rem(2px);
              font-size: rem(12px);
              color: #dc3838;
            }
          }
        }
        >.plat-info-body {
          >li {
            display: flex;
            line-height: rem(21px);
            >.left {
              flex: 0 0 rem(50px);
              width: rem(50px);
              font-size: rem(12px);
              color: #666666;
            }
            >.right {
              padding-left: rem(10px);
              flex: 1;
              font-size: rem(12px);
              color: #333333;
              &.dc3838 {
                color: #dc3838;
              }
            }
          }
        }
      }
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: rem(50px);
  background-color: #fff;
  >.footer-item {
    flex: 1;
    height: 100%;
    text-align: center;
    font-size: 0;
    >a {
      display: block;
      >.icon-wrapper {
        width: 100%;
        height: rem(36px);
        line-height: rem(36px);
        >.basefont {
          display: inline-block;
          vertical-align: middle;
          width: rem(20px);
          height: rem(24px);
          @include bg-image('../images/icon-b');
          background-repeat: no-repeat;
          -webkit-background-size: 100%;
          background-size: 100%;
        }
        >.licai {
          display: inline-block;
          vertical-align: middle;
          width: rem(22px);
          height: rem(22px);
          @include bg-image('../images/icon-l');
          background-repeat: no-repeat;
          -webkit-background-size: 100%;
          background-size: 100%;
        }
        >.ceping {
          display: inline-block;
          vertical-align: middle;
          width: rem(20px);
          height: rem(20px);
          @include bg-image('../images/icon-c');
          background-repeat: no-repeat;
          -webkit-background-size: 100%;
          background-size: 100%;
        }
        >.center {
          display: inline-block;
          vertical-align: middle;
          width: rem(18px);
          height: rem(21px);
          @include bg-image('../images/icon-m');
          background-repeat: no-repeat;
          -webkit-background-size: 100%;
          background-size: 100%;
        }
      }
      >span {
        display: inline-block;
        width: 100%;
        font-size: 10px;
        color: #acacac;
      }
    }
    &.active {
      >a {
        >.icon-wrapper {
          >.basefont {
            @include bg-image('../images/icon-b-active')
          }
          >.licai {
            @include bg-image('../images/icon-l-active')
          }
          >.ceping {
            @include bg-image('../images/icon-c-active')
          }
          >.center {
            @include bg-image('../images/icon-m-active')
          }
        }
      }
    }
  }
}

.swiper-pagination {
  bottom: rem(5px)!important;
  padding-right: rem(16px);
  text-align: right!important;
  >.swiper-pagination-bullet {
    margin: 0 rem(3px)!important;
    vertical-align: middle;
    width: rem(4px);
    height: rem(4px);
    &.swiper-pagination-bullet-active {
      width: rem(8px);
      height: rem(8px);
      background: #fff;
    }
  }
}